<template>
  <div style="height: 100%;">
    <el-card style="border-radius: 10px 10px 0px 0px;" shadow="hover" :style="{height:gadgetHeight+ 'px'}">
      <div v-if="isHasData" class="content el-card__body" :style="{height:gadgetHeight+ 'px'}">
        <!--  -->
      </div>
      <div v-else
             class="gadget-no-data">
          <el-image @click="query()" :src='noDataImageUrl'
                    fit='fill'></el-image>
        </div>
    </el-card>
    <model :showSetting="queryModelDefaultSetting.showSetting" @queryModelClosed="queryModelClosed"
      :dataInfo="queryModelDefaultSetting.dataInfo" :updateGadget="upgradeGadgetSetting" />
  </div>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
// import model from '@/components/gadget/query-model/query-model.vue'

export default ({
  mixins: [mixinGadgetViewModule],
  components: { model: () => import('@/components/gadget/query-model/query-model')
  },
  data: function () {
    return {
      datesource: {
        value: '0'
      },
      gadgetSetting: {},
      loading: false,
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: this.gadgetInfo.com,
          gadgetSetting: {

          }
        }
      }
    }
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    this.gadgetHeight = (this.gadgetInfo.h * 20) - 20
    this.query()
    this.subscribeMessage('runReport', this.query)
    this.$store.state.isWidget = false
  },
  methods: {
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    resized (i, newH, newW, newHPx, newWPx) {
      this.gadgetHeight = (newH * 20) - 20
      this.gadgetWidth = newWPx
    },
    query () {
      this.loading = true
      this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      var _self = this
      var param = {
        ...this.slicer,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName,
        pageId: this.pageId,
        gadgetId: this.id
      }
      this.$interface.reports.getReportDataInfo(param).then(({ data: res }) => {
        _self.verifyHasData(res)
        if (res.config) {
          _self.gadgetSetting = Object.assign({}, _self._.merge(_self.gadgetSetting, res.config))
        }
        if (res.data && res.data.length > 0) {
          let tempData = res.data
          _self.datesource = tempData
        }

        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }

  }
})
</script>
<style scoped>
  .el-card ::v-deep .el-card__body {
    padding: 0px !important;
  }

  .el-card ::v-deep .el-divider--horizontal {
    margin: 3px 0 !important;
  }

</style>
